<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/bootstrap-3.3.7-dist/css/bootstrap.css">
    <style type="text/css">
        a {
            text-decoration: none;
        }

        a:hover {
            text-decoration: none;
            font-weight: bold;
        }

    </style>
</head>
<body>
<div class="container" style="margin-top: 5%;">
    <P>
    <h2>MongoDB数据的读取</h2></P>

    <div>
      <form action="/mongodb/select" method="get">
          <input class="layui-input" name="name" placeholder="name"/>
          <input class="layui-input" name="age" placeholder="age"/>
          <button id="search" >查询</button>
      </form>
    </div>
    <form action="/mongodb/save">
        <table class="table table-bordered">
            <thead>
            <tr>
                <th style="width:100px;">sequence</th>
                <th>name</th>
                <th>age</th>
                <th>operation</th>
            </tr>
            </thead>
            <tbody>
            <th:block th:each="c,lstat:${DataList}">
                <tr>
                    <td><span th:text="${lstat.index+1}"></span><input type="hidden" th:value="${c.id}"></td>
                    <td><label th:text="${c.name}"></label></td>
                    <td><label th:text="${c.age}"></label></td>
                    <td>
                        <a th:href="@{/mongodb/delete(id=${c.id})}">删除</a>
                        <a href="javascript:void(0)" onclick="haveInput(this)">更新</a>
                        <a href="javascript:void(0)" id="update" field="updateInfo" onclick="update(this)" style="display: none;">保存</a>
                    </td>
                </tr>
            </th:block>
            <td><input type="hidden" /></td>
            <td><input class="form-control" name="name"></td>
            <td><input class="form-control" name="age"></td>
            <td>
                <a href="javascript:void(0)" id="add" field="addInfo" onclick="add(this)" >添加</a>
            </td>
            </tbody>
        </table>
    </form>
</div>

<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="/js/base-operation.js"></script>
<script type="text/javascript">

    //操作按钮变更

    function noInput(e){
        var oname = $(e).parent().parent().find("td:eq(1)");
        var oage = $(e).parent().parent().find("td:eq(2)");
        oname.html("<Label>" + oname.find("input").val() + "</Label>");
        oage.html("<Label >" + oage.find("input").val() + "</Label>");
    }
    function haveInput(e){
        var oname = $(e).parent().parent().find("td:eq(1)");
        var oage = $(e).parent().parent().find("td:eq(2)");
        oname.html("<input name='name' class='form-control' value='" + oname.find("Label").text() + "'>");
        oage.html("<input name='age' class='form-control' value='" + oage.find("Label").text() + "'>");
        $(e).next().show();
        $(e).hide();
    }
    //重构
    function add(e) {
        var message = $(e).text();
        jsonAsyncAjax("/mongodb/add", "post", getData(e),
            function (data) {
                if (data.state == true) {
                    alert(message + "成功");
                } else
                    alert(message + "失败");
                window.location.reload();
            })

    }

    function update(e){
        var message = $(e).text();
        jsonAsyncAjax("/mongodb/save", "post", getData(e),
            function (data) {
                if (data.state == true) {
                    alert(message + "成功");

                } else
                    alert(message + "失败");
                window.location.reload();
            })
    }



    function getData(e) {
        var id = $(e).parent().parent().find("td:eq(0) input").val();
        var name = $(e).parent().parent().find("td:eq(1) input").val();
        var age = $(e).parent().parent().find("td:eq(2) input").val();
        var data = {"id": id, "name": name, "age": age};
        return data;
    }

</script>
</body>
</html>